{% extends "base_master.html" %}

{% block include %}

<link rel="stylesheet" type="text/css" media="screen" href="/resources/grid/themes/redmond/jquery-ui-1.7.1.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/resources/grid/themes/ui.jqgrid.css" />
				
<script src="/resources/grid/js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="/resources/grid/js/i18n/grid.locale-kr.js" type="text/javascript"></script>
<script src="/resources/grid/js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="/resources/grid/js/grid.celledit.js" type="text/javascript"></script>
<script src="/resources/grid/js/grid.base.js" type="text/javascript"></script> <!--  jqGrid base--> 
<script src="/resources/grid/js/grid.common.js" type="text/javascript"></script> <!--  jqGrid common for editing -->
<script src="/resources/grid/js/grid.formedit.js" type="text/javascript"></script> <!-- jqGrid Form editing -->
<script src="/resources/grid/js/grid.inlinedit.js" type="text/javascript"></script> <!--  jqGrid inline editing -->
<script src="/resources/grid/js/grid.celledit.js" type="text/javascript"></script> <!--  jqGrid cell editing-->
<script src="/resources/grid/js/grid.subgrid.js" type="text/javascript"></script> <!-- jqGrid subgrid -->
<script src="/resources/grid/js/grid.treegrid.js" type="text/javascript"></script> <!--  jqGrid treegrid -->
<script src="/resources/grid/js/grid.custom.js" type="text/javascript"></script> <!--  jqGrid custom --> 
<script src="/resources/grid/js/grid.postext.js" type="text/javascript"></script> <!--  jqGrid postext -->
<script src="/resources/grid/js/grid.tbltogrid.js" type="text/javascript"></script> <!--  jqGrid table to grid --> 
<script src="/resources/grid/js/grid.setcolumns.js" type="text/javascript"></script> <!--  jqGrid setcolumns -->
<script src="/resources/grid/js/grid.import.js" type="text/javascript"></script> <!-- jqGrid import -->
<script src="/resources/grid/js/grid.jqueryui.js" type="text/javascript"></script> <!-- jqGrid import -->
<script src="/resources/grid/js/jquery.fmatter.js" type="text/javascript"></script> <!--  jqGrid formater -->
<script src="/resources/grid/js/JsonXml.js" type="text/javascript"></script> <!-- xmljson utils -->
<script src="/resources/grid/js/jquery.searchFilter.js" type="text/javascript"></script> <!--  search Plugin -->
<script src="/resources/grid/js/ui.datepicker.js" type="text/javascript"></script> <!--  search Plugin -->
<script src="/resources/grid/js/ui.datepicker-ko.js" type="text/javascript"></script> <!--  search Plugin -->
<script src="/resources/grid/js/jquery-ui-1.7.1.custom.min.js" type="text/javascript"></script>
<script src="/resources/grid/js/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>
<script src="/resources/grid/jgGridTable.js" type="text/javascript"></script>

{% endblock %}

{% block script %}
jQuery(document).ready(function(){

	var mygrid = jQuery("#list1").jqGrid({
		url : '/grid.do', //데이터 유알엘
		datatype : 'xml', //데이터 타입은 xml ,json , custom type 
		mtype : 'POST', //파라메터를 넘길때 get or post
		width : 600, // 그리드 너비
		height: 200, // 그리드 높이
		colNames : ['시드', '아이디','이름','학교','학과','전공','세부전공2'], // 컬럼에 박힐 이름

		// colModel 은 컬럼과 일치한 데이터의 집합을 그리드
		// xmlReader 와 연계된다 
		// name  : 유니크한 컬럼 네임을 설정
		// index : 정렬시 index 이름으로 sort 한다
		// width : height : 그리드 너비, 높이
		// xmlmap : xmlReader 와 연계되는 키값 셋팅된 노드의 데이터를 그리드한다. 
		colModel : [
		            {name : 'sid', index :'sid', width: 50, hidden : true, xmlmap : "SID"},
		            {name : 'iid', index : 'id', width : '70' , xmlmap : "ID"},
		            {name : 'name', index : 'name', width : '70', xmlmap : "NAME"},
		            {name : 'now_school', index : 'now_school', width : '120', xmlmap : "NOW_SCHOOL" , searchoptions:{dataInit:function(el){$(el).datepicker({dateFormat:'yy-mm-dd'});}}},
		            {name : 'now_department', index : 'now_department', width : '100' , xmlmap : "NOW_DEPARTMENT" },
		            {name : 'junkong', index : 'junkong', width : '80', xmlmap : "JUNKONG"},
		            {name : 'detail_junkong', index : 'detail_junkong', width : '250', xmlmap : "DETAIL_JUNKONG" ,sortable:false}	            
					],

		//xml 데이터를 그리드에 뿌려줄때 구현
		xmlReader: { 
		      root:"result", 
		      row:"row",
		      page:"rows>page", 
		      total:"rows>total", 
		      records:"rows>records",
		      repeatitems:false,
		      id : "id"
		  },
							
	   	pager: jQuery('#pager'), //페이징부분을 설정
	    rowNum: 10, // 기본적으로 뿌려줄 행 갯수 (int)
	    
	    rowList:[10,20,30], //다수의 행을 그리드내에서 뿌려줄때 설정된다. (int)
	    rownumbers: true, //컬럼앞에 행 번호를 찍어준다 (true, false)
	    rownumWidth: 30, //행번호를 출력할 시 행번호 컬럼의 너비 조정
	    sortname: 'id', // 정렬시 디폴트 로 찍어줄 값 (column index)
	    sortorder: "desc", //정렬시 내림차순, 오름차순 (asc , desc)
	    gridview : false, // 번역안됨..
	    viewrecords: true, //이거한하면 그드에 데이터 안나옴...
	    imgpath: 'themes/redmond/images', //그리드 스타일시트 경로 (jquery-ui theme 를 사용)
	    caption: '교수회원정보', //그리드상단에 출력되는 캡션
	   	multiselect: false, //다중 선택 (true, false)
	   	hiddengrid : false, //시작시 그리드를 숨겨있는 상태로
	   	hidegrid: false, //?
	   	loadui: "block", //페이징시 화면 을 검게..(검색중을 시각화..)
	   	postData:{flag:0}, //flag
	   	sortable: true // column reordering

	   //페이징 영역에 기능버튼을 삽입하거나 뺄수있다
	}).navGrid('#pager',{edit:false,add:false,del:false,search:false,refresh:false}) 
	
	
	// 토글기능을 이용한 ajax 검색 서칭기능을 구현
	.navButtonAdd("#pager",{caption:"검색",title:"Toggle Search Toolbar", buttonicon :'ui-icon-pin-s',
	onClickButton:function(){
		mygrid[0].toggleToolbar();
	}})
	.navButtonAdd("#pager",{caption:"검색초기화",title:"Clear Search",buttonicon :'ui-icon-refresh',
	onClickButton:function(){
		mygrid[0].clearToolbar();
	}})
	.navButtonAdd("#pager",{caption:"Columns",title: "Reorder Columns",buttonicon :'ui-icon-newwin' ,onClickButton : function (){
		   $("#list1").setColumns();
		   return false; 
	}})
	.navButtonAdd("#pager",{caption:"Excel",title: "Export Excel",buttonicon :'ui-icon-document-b' ,onClickButton : function (){
		
	    var gsr = $("#list1").jqGrid('getGridParam','colNames');
	    var gsl = $("#list1").jqGrid('getGridParam','colModel');
	    var oo = $("#list1").jqGrid('getPostData');
		var colNames = "";	
		var colMaps = "";
		$("<form id='excel' action='<%=root%>/grid.do' method='post'/>").appendTo("body");
	
		$("#excel").append("<input type='hidden' id='flag' name='flag' value='6'/>");

		for(var i=1; i < gsr.length; i++)
		{

			var temp = gsr[i];
			var temp1 = gsl[i].xmlmap;
			if(i != gsr.length -1){
				colNames += temp + ",";
				colMaps += temp1 + ",";
			}
			else{
				colNames += temp;
				colMaps += temp1;
			}

			
			if(eval("oo." + gsl[i].index)){
				$("#excel").append("<input type='text' id='"+gsl[i].index+"' name='"+gsl[i].index+"' value='" +  eval("oo." + gsl[i].index) + "' />");
			}
			
		}	

		$("#excel").append("<input type='hidden' id='colNames' name='colNames' value='"+colNames+"'/>");
		$("#excel").append("<input type='hidden' id='colMaps' name='colMaps' value='"+colMaps+"'/>");
		$("#excel").append("<input type='hidden' id='fileName' name='fileName' value='"+$("#list1").jqGrid('getGridParam','caption')+"'/>");
		$("#excel").submit();
		$("#excel").remove();

		return false; 
	}});


	mygrid.filterToolbar();
});

{% endblock %}


{% block body %}
Datagrid : 게시물 조회 , 검색 별 조회(ajax), paging..

<table id="list1" class="scroll" cellpadding="0" cellspacing="0"></table>

<div id="pager" class="scroll"></div>
{% endblock %}
